<template>
	<view>
		<tt-bar title="确认订单" leftIcon="icon-back">
		</tt-bar>
		<view class="payInfoBox">
			<text class="payCount">￥1006.00</text>
			<text class="payTishi">含“支付通道商”0.6%交易手续费</text>
		</view>
		<view class="payType">
			<view class="row tapBg" data-type="wechat" @tap="selectPayType">
				<image src="../../static/wechatPay.png"></image>
				<view class="payTypeInfo">
					<text class="typeText">微信支付</text>
					<text class="typeTishi">含￥6.00元交易手续费</text>
				</view>
				<text class="iconfont" :class="[payType=='wechat'?'icon-yuanxingxuanzhongfill':'icon-yuanxingweixuanzhong']"></text>
			</view>
			<!-- <view class="row tapBg" style="margin-bottom: 0;" data-type="alipay" @tap="selectPayType">
				<image src="../../static/alipay.png"></image>
				<view class="payTypeInfo">
					<text class="typeText">支付宝支付</text>
					<text class="typeTishi">含￥12.00元交易手续费</text>
				</view>
				<text class="iconfont" :class="[payType=='alipay'?'icon-yuanxingxuanzhongfill':'icon-yuanxingweixuanzhong']"></text>
			</view> -->
		</view>
		<button class="payBtn">确认支付</button>
	</view>
</template>

<script>
	import ttBar from "@/components/ttBar/ttBar.vue";
	export default {
		components: {
			ttBar
		},
		data() {
			return {
				payType:'wechat'
			};
		},
		methods:{
			selectPayType(e){
				let _type=e.currentTarget.dataset.type
				this.payType=_type
			}
		},
		onPullDownRefresh() {
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 1500)
		}
	}
</script>

<style lang="less">
	page {
		background-color: #f6f6f6;
	}

	.payInfoBox {
		display: flex;
		flex-direction: column;
		background-color: #FFFFFF;
		align-items: center;
		padding: 80upx 0 50upx 0;

		.payCount {
			font-size: 63rpx;
			font-weight: bold;
			color: #222433;
			margin-bottom: 50upx;
		}

		.payTishi {
			font-size: 28rpx;
			color: #a0a0a0;
		}
	}

	.payType {
		background-color: #FFFFFF;
		margin-top: 28upx;
		padding: 10upx 0;
		display: flex;
		flex-direction: column;

		.row {
			display: flex;

			align-items: center;
			padding: 30upx 75upx 30upx 54upx;

			image {
				width: 90upx;
				height: 90upx;
				margin-right: 28upx;
			}

			.payTypeInfo {
				display: flex;
				flex-direction: column;
				flex-grow: 1;

				.typeText {
					font-size: 32rpx;
					font-weight: bold;
					color: #222433;
				}

				.typeTishi {
					font-size: 28rpx;
					color: #4e4f56;
					margin-top: 12upx;
				}
			}

			.iconfont {
				font-size: 48upx;
				color: #e7e7e7;
			}

			.icon-yuanxingxuanzhongfill {
				color: #ffb11a;
			}

		}
	}

	.payBtn {
		margin: 100upx 60upx 0 60upx;
		height: 98upx;
		background-color: #ffb11a;
		border-radius: 14rpx;
		border: none;
		color: #FFFFFF;
		font-size: 42rpx;
		line-height: 98upx;
	}
	.payBtn:after{
		border: none;
	}
</style>
